<template>
  <div>
    <!----------------------------查询----------------- -- -->
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="query">
        <el-form-item>
          <el-input
            v-model="query.pushLevelName"
            placeholder="推送名称"
            :clearable="true"
          >
          </el-input>
        </el-form-item>
        
      </el-form>
       <el-button type="primary" @click="loadRefound"
            >查询<i class="el-icon-search"></i
          ></el-button>
          
          <el-button type="success" @click="exportExcel">导出数据</el-button>
          <el-col :span="4">
               <el-upload
                   class="clearfix"
                   action="http://localhost:8888/push/importExcel"
                   name="file"
                   :on-progress="onExcelProgress"
                   :on-success="handleExcelSuccess"                   
                   accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                   multiple
                   :limit="1"
                   >
                <el-button  type="primary">数据导入</el-button>
               </el-upload>
         </el-col>
    </div>
   
     <!-- ------------------列表------------------ -->
    <el-table :data="List" border style="width: 100%">
      <el-table-column prop="pushLevelId" label="ID" width="180"></el-table-column>
      <el-table-column prop="pushLevelName" label="推送名称" width="180">
      </el-table-column>
      <el-table-column prop="pushLevelDesc" label="备注"> </el-table-column>
       <el-table-column label="操作" width="280">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.pushLevelId)"
            >编辑</el-button
          >
          <el-button size="mini" @click="push(scope.row.pushLevelId)"
            >推送</el-button
          >
          <el-popconfirm title="这是一段内容确定删除吗？" @confirm="handleDelete(scope.row.pushLevelId)">
            <el-button
            slot="reference"
            size="mini"
            type="danger"           
            >删除</el-button>
          </el-popconfirm>
          
        </template>
      </el-table-column>
    </el-table>

<!----------------------------添加----------------- -- -->
    <el-dialog title="添加任务" :visible.sync="dialog.addDialogFormVisible" width="30%">
      <el-form :model="addForm">
        
       <el-form-item label="推送名称" prop="pushLevelName" >
              <el-input v-model="addForm.pushLevelName" ></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="pushLevelDesc">
              <el-input v-model="addForm.pushLevelDesc"></el-input>
            </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </div>
    </el-dialog>
    <!----------------------------修改----------------- -- -->
  <el-dialog title="修改信息" :visible.sync="dialog.editDialogFormVisible" width="30%">
      <el-form ref="updateForm" :model="updateForm" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="编号" prop="pushLevelId" hidden>
              <el-input v-model="updateForm.pushLevelId" clearable ></el-input>
            </el-form-item>
            <el-form-item label="推送名称" prop="pushLevelName" >
              <el-input v-model="updateForm.pushLevelName" ></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="pushLevelDesc">
              <el-input v-model="updateForm.pushLevelDesc"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateshow = false">取 消</el-button>
        <el-button type="primary" @click="editUser()">确 定</el-button>
      </span>
    </el-dialog>

     <el-button type="success" @click="dialog.addDialogFormVisible = true"
            >新建</el-button
          >
  </div>
</template>

<script>
export default {
  data() {
    return {
        List:[],
        updateForm: {},
        addForm:{},
        dialog: {
        addDialogFormVisible: false,
        editDialogFormVisible: false,
      },
      query: {
        pushLevelName: "",
      },
    };
  },
  methods: {
     push (pushLevelId) {
      this.$axios.get("rec/" + pushLevelId).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("添加成功");
          // // this.dialog.addDialogFormVisible = false; //关闭模态框
          // //注意要指定prop="did"属性才能起作用
          // this.$refs.addForm.resetFields();
          // this.$refs.upload.clearFiles();
          // this.imageUrl = "";
          // this.loadUsers(); //刷新
        }
      });
    },
        handleExcelSuccess(res,result) {
                this.$message.success("导入成功");
                if (result.response.success) {
                    this.loadRefound();
                }
            },
            // 上传中
            onExcelProgress(){

            },
     exportExcel() {    
      this.$axios
        .post("push/exportExcel", this.query,{responseType: 'blob'})
        .then((res) => {
          let fileName = res.headers["content-disposition"].split("=")[1];//得到后端生成的文件名          
          let url = window.URL.createObjectURL(new Blob([res.data]));
          let dom = document.createElement("a");
          dom.style.display = "none";
          dom.href = url;
          dom.setAttribute("download", fileName); //指定下载后的文件名，防跳转
          document.body.appendChild(dom);
          dom.click();
          // 释放内存
          dom.parentNode.removeChild(dom)
          window.URL.revokeObjectURL(dom.href);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
     loadRefound() {
      this.$axios.post("push/queryAll",this.query).then((res) => {
        this.List = res.data.data.List;
      });
    },
      handleEdit(pushLevelId){
      this.dialog.editDialogFormVisible=true;
      this.$axios.get("push/"+pushLevelId)
      .then(res=>{
        this.updateForm = res.data.data.pushLevel;
      });

    },
     editUser(){
      this.$axios.put("push",this.updateForm)
      .then(res=>{
        if(res.data.code==200){
          this.$message.success("修改成功");
          this.dialog.editDialogFormVisible = false;//关闭模态框
          this.loadRefound();//刷新
        }
      })

    },
     addUser(){
      this.$axios.post("push",this.addForm)
      .then(res=>{
        if(res.data.code==200){
          this.$message.success("添加成功");
          this.dialog.addDialogFormVisible = false;//关闭模态框
          this.loadRefound();//刷新
        }
      })

    },
    handleDelete(pushLevelId){
      this.$axios.delete("push/"+pushLevelId)
      .then(res=>{
        if(res.data.code==200){
          this.$message.success("删除成功");
          this.loadRefound();
        }else{
          this.$message.error("删除失败");
        }
      })

    },
  },
  mounted() {
    this.loadRefound();
  }
};
</script>